<template>
  <div class="HGIS">
    <div class="oil-color-in ">
      <inTitle />
      <div class="in-cont centermap">
        <In />
      </div>
    </div>
    <rightModular />
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import In from "./In/index.vue";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import rightModular from '../rightModular/index.vue'
import inTitle from '@/views/OnlineMonitor/components/inTitle.vue';
@Component({
  components: { In, rightModular,inTitle },
})
export default class HGIS extends Vue {

}
</script>
<style lang="scss" scoped>
.HGIS {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  .oil-color-in {
    width: calc(100% - 6.5rem);
    height: 100%;
    margin: 0 0.2rem;
    .in-title {
      width: 100%;
      height: 0.4rem;
      line-height: 0.4rem;
      font-size: 0.2rem;
      text-align: center;
      color: #76eefa;
    }
    .in-cont {
      width: 100%;
      margin-top: 0.05rem;
      height: calc(100% - 0.45rem);
    }
  }
  .oil-color-right {
    width: 6.5rem;
    height: 100%;
    .return {
      width: 100%;
      height: 0.4rem;
      line-height: 0.38rem;
      text-align: right;
      > span {
        display: inline-block;
        width: 0.9rem;
        height: 0.3rem;
        background: url(../../../../assets/img/return.png) no-repeat;
        background-size: 100% 100%;
        vertical-align: middle;
        cursor: pointer;
      }
    }
    .right-cont {
      width: 100%;
      margin-top: 0.05rem;
      height: calc(100% - 0.45rem);
      .flex-box {
        height: calc(100% - 0.27rem);
        display: flex;
        flex-direction: column;
        > div:nth-child(1) {
          height: 23%;
          width: 100%;
          position: relative;
          overflow: hidden;
          .right-top-input {
            line-height: 0.4rem;
            box-sizing: border-box;
            padding-left: 0.2rem;
          }
          //左右ioc 按钮
          .icon {
            position: absolute;
            top: 50%;
            z-index: 999;
            color: #36b0eb;
            padding: 0.1rem;
            font-size: 0.2rem;
            cursor: pointer;
          }
          .icon-left {
            left: 2%;
             transform: rotate(180deg);
          }
          .icon-right {
            right: 2%;
           
          }
          .icons {
            color: #ccc;
          }
          .icons2 {
            color: #ccc;
          }
          //移动盒子
          .tans {
            position: absolute;
            width: 100%;
            height: 100%;
            transition: all 0.6s;
            top: 0;
          }
          .right-top-rotation {
            height: calc(100% - 0.4rem);
            width: calc(100% - 0.8rem);
            margin: 0 0.4rem;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            .rotation-img {
              height: 100%;
              width: 25%;
              display: inline-block;
              position: relative;
              .bg {
                width: 1.7rem;
                height: 1.7rem;
                position: absolute;
                left: 50%;
                top: 40%;
                transform: translate(-50%, -50%);
                cursor: pointer;
              }
              .cont {
                width: 0.75rem;
                height: 0.6rem;
                position: absolute;
                left: 50%;
                top: 41%;
                transform: translate(-50%, -50%);
              }
              .rotation-text {
                position: absolute;
                left: 50%;
                top: 84%;
                transform: translateX(-50%);
                cursor: pointer;
              }
            }
            .rotation-img:hover {
              > .bg {
                transition: all 0.2s;
                width: 2rem;
                height: 2rem;
              }
              > .cont {
                transition: all 0.2s;
                width: 0.9rem;
                height: 0.7rem;
              }
              > .rotation-text {
                transition: all 0.2s;
                bottom: 1%;
                font-size: 0.18rem;
              }
            }
            .visited {
              > .bg {
                transition: all 0.2s;
                width: 2rem;
                height: 2rem;
              }
              > .cont {
                transition: all 0.2s;
                width: 0.9rem;
                height: 0.7rem;
              }
              > .rotation-text {
                transition: all 0.2s;
                bottom: 1%;
                font-size: 0.18rem;
                color: #1AB2FF;
              }
            }
          }
        }
        > div:nth-child(2) {
          height: 46%;
          width: 100%;
          margin: 0.15rem 0;
        }
        > div:nth-child(3) {
          height: 31%;
          width: 100%;
        }
      }
    }
  }
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.HGIS {
  .right-top-input {
    // 下拉框start
    .el-select {
      width: 1.38rem;
    }
    .el-select .el-input .el-input__inner {
      height: 0.24rem;
      line-height: 0.24rem;
      // border: 1px solid #03bdfd;
    }
    .el-select .el-input .el-input__icon {
      line-height: 0.24rem;
    }
  }
}
</style>
